/**
 * Created by zhangyida on 16/1/3.
 */
/**
 * Created by zhangyida on 15/12/29.
 */
'use strict';

import {
    View,
    TouchableOpacity,
    Navigator,
    Text,
    Image,
    ListView,
    StyleSheet,
    SegmentedControlIOS,
    TouchableHighlight,
    AlertIOS,
    ActivityIndicatorIOS
} from 'react-native';
import React from 'react';
import URL from '../config/server';
import {Utils} from '../config/utils';
import {Key} from '../config/key';
import Footer from '../component/Footer';
import Icon from 'react-native-vector-icons/Ionicons';


const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.replace({id:'Portfolio'})}>
                <View style={{flexDirection:'row',padding:5}}>
                    <Icon name="ios-arrow-back" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                    <Text style={{color: 'white', margin: 3,fontSize:18}}>
                        返回
                    </Text>
                </View>
            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.push({id:'PortfolioAdd'})}>
                <Icon name="ios-add" size={28} color="#ffffff" style={{alignSelf:'center',marginRight:10}}/>
            </TouchableOpacity>
        );
    },

    Title(route, navigator, index, navState) {
        return (
            <Text style={styles.navTitle}>
                管理自选股
            </Text>
        );
    }
};


class ListHeader extends React.Component {
    render() {
        return (
            <View style={styles.th}>
                <Text style={styles.thText}>
                    股票代码
                </Text>
                <Text style={styles.thText}>
                    股票名称
                </Text>
                <Text style={styles.thText}>
                    操作
                </Text>
            </View>
        );
    }
}

export default class PortfolioManager extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            }),
            loaded: 0,
            loadMore: true,
            pagesize: 0
        };
    }

    componentDidMount(){
        this.fetchData();
    }

    fetchData() {
        let that = this;
        console.log('manager获取portfolio数据');
        if(Key.username==''){
            var PORTFOLIO = URL.local + 'zixuanInfos/0/';
        }else{
            var PORTFOLIO = URL.local + 'zixuanInfos/' + Key.username + '/';
        }
        console.log(PORTFOLIO);
        Utils.get(PORTFOLIO, function (data) {
            console.log(data.length);
            //data.length=0;
            if (data.length > 0) {
                that.setState({
                    dataSource: that.state.dataSource.cloneWithRows(data),
                    loaded: 2
                })
            } else {
                that.setState({
                    loaded: 1
                })
            }
        })
    }


    handleEnd() {
        console.log("Ending!!!");
        var temp = this.state.pagesize;
        this.setState({
            pagesize: this.state.pagesize + 10
        }, function cb() {
            this.fetchData()
        });
    }

    _renderFooter() {
        if (this.state.loadMore) {
            return (
                <View style={styles.footerload}>
                    <ActivityIndicatorIOS
                        animating={true}
                        style={{justifyContent:'center'}}
                    />
                    <Text>
                        加载数据...
                    </Text>
                </View>
            )
        }
    }

    renderScene() {
        if (this.state.loaded == 0) {
            return this.renderLoadingView();
        } else if (this.state.loaded == 1) {
            return this.renderNoData();
        } else {
            return (
                <View style={styles.container}>
                    <ListHeader/>
                    <ListView
                        style={styles.contentView}
                        dataSource={this.state.dataSource}
                        renderRow={this._renderRow.bind(this)}
                    />
                </View>
            );
        }
    }

    renderLoadingView() {
        return (
            <View style={styles.container}>
                <View style={styles.listView}>
                    <Text style={styles.centerText}>
                        正在加载数据，请稍后...
                    </Text>
                </View>
            </View>
        );
    }

    renderNoData() {
        return (
            <View style={styles.container}>
                <View style={styles.listView}>
                    <Text style={styles.centerText}>
                        暂无自选股,请点击右上方+添加
                    </Text>
                </View>
            </View>
        );
    }
    deleteItem(item){
        let that = this;
        const DELETE_PORTFOLIO = URL.local+'delzixuan/'+item.id;
        Utils.get(DELETE_PORTFOLIO,function(data){
            if(data){
                that.fetchData();
            }
        })
    }
    _renderRow(item) {
        return (
            <View style={styles.Items}>
                <Text style={styles.title}>{item.code}</Text>
                <Text style={styles.title}>{item.name}</Text>
                <TouchableOpacity style={styles.delete} onPress={()=>{this.deleteItem(item)}}>
                    <Text style={{fontSize:15,textAlign:'center'}}>删除</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        return (
            <Navigator
                renderScene={this.renderScene.bind(this)}
                navigator={this.props.navigator}
                message={this.props.message}
                navigationBar={
                    <Navigator.NavigationBar
                        style={{backgroundColor: '#e02820', alignItems: 'center'}}
                        routeMapper={NavigationBarRouteMapper}/>
                }
            />
        );
    }
}
const styles = StyleSheet.create({
    container: {
        marginTop: 64,
        flex: 1,
        backgroundColor: '#ffffff'
    },
    newstitle: {
        marginTop: 5,
        height: 30,
        width: 200
    },
    navTitle: {
        color: 'white',
        margin: 10,
        fontSize: 20,
    },
    search: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingRight: 10
    },
    Items: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
        backgroundColor: '#f5f5f9',
        borderBottomWidth: 0.5,
        borderColor: '#dddddd'
    },
    footerload: {
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row'
    },
    contentView: {
        flex: 12,
        backgroundColor: '#f5f5f9'
    },
    listView: {
        flex: 12,
        paddingTop: 20,
        backgroundColor: '#f5f5f9',
        justifyContent: 'center',
        alignItems: 'center'
    },
    up: {
        flex: 1
    },
    down: {
        height: 44,
        backgroundColor: '#000000',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    bottomText: {
        flex: 1,
        color: '#ffffff',
        textAlign: 'center',
        fontSize: 16
    },
    rightContainer: {
        flex: 1,
        height: 70,
        justifyContent: 'flex-start'
    },
    title: {
        flex: 3,
        fontSize: 14,
        textAlign: 'center'
    },
    mtitle: {
        flex: 4,
        fontSize: 14,
        textAlign: 'center'
    },
    delete: {
        flex: 3
    },
    thumbnail: {
        width: 100,
        height: 70,
        marginRight: 3,
        resizeMode: Image.resizeMode.stretch
    },
    searchBar: {
        position:'relative',
        padding: 10,
        paddingLeft: 8,
        backgroundColor: "#f5f5f9",
        flexDirection: 'row',
        alignItems: 'center'
    },
    searchInput: {
        borderWidth: 0.5,
        borderColor: "#000000",
        borderRadius: 5,
        fontSize: 15,
        flex: 10,
        height: 30,
        paddingLeft:30
    },
    searchIcon: {
        alignSelf: 'center',
        textAlign: 'center',
        position:'absolute',
        left:15,
        top:15,
    },
    spinner: {
        width: 30
    },
    separator: {
        height: 1,
        backgroundColor: '#eeeeee'
    },
    refresh: {
        position: 'absolute',
        right: 10,
        bottom: 10,
        width: 46,
        paddingLeft: 7,
        paddingTop: 3,
        height: 45,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
    },
    th: {
        flexDirection: 'row',
        backgroundColor: "#000000",
        height: 30,
        justifyContent: "center",
        alignItems: 'center',
        padding: 10
    },
    thText: {
        flex: 1,
        borderRightWidth: 0.5,
        borderColor: '#dddddd',
        textAlign: 'center',
        fontSize: 16,
        color: '#ffffff'
    },
    centerText: {
        fontSize: 18
    },
    total:{
        backgroundColor:'#000',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'
    },
    totalItem:{
        flex:1,
        backgroundColor:'#292929',
        paddingTop:5,
        paddingBottom:5,
    },
    totalName:{
        flex:1,
        fontSize:16,
        color:'#ffffff',
        textAlign:'center'
    },
    totalAll:{
        flex:1,
        fontSize:19,
        color:"#ffffff",
        textAlign:'center'
    },
    totalTwo:{
        flex:1,
        flexDirection:'row',
    },
    totalNum:{
        flex:1,
        color:"#ffffff",
        fontSize:12,
        textAlign:'center',
        margin:3
    }
});